<template>
  <div>
    watch的监听
    <div ref="watchRef" @click="clickWatch($event)">点击更改watch监听</div>
    <div @click="clickAge($event)">改变年龄大小</div>
    <div>{{ obj.age }}</div>
    <div>count：{{ count }}</div>
  </div>
</template>
<script setup lang="ts">
// watch 和 watchEffect的区别
// watchEffect 会立即执行一次，然后当依赖发生变化时，会重新执行。
// watch 只有在依赖发生变化时，才会执行。
// watchEffect 无法获取到旧值，而 watch 可以。

import { ref, watch, watchEffect, useTemplateRef } from 'vue'
let count = 1

const watchTest = ref(1)
const obj = ref({
  name: 'watch',
  age: 18,
})

const clickWatch = (e: any) => {
  watchTest.value++
  count++
}

const clickAge = (e: any) => {
  obj.value.age++
}

watch(watchTest, (nv, ov, cleanup) => {
  console.log('触发了watch1122', nv, ov)
  cleanup(() => {
    //清除 第一次不触发,第二次watchTest改变后 在watch 逻辑之前触发
    console.log('??触发cleanup')
  })
})

watchEffect((cleanup) => {
  if (obj.value.age > 18) {
    console.log('触发了watchEffect,年龄大于18')
  } else {
    console.log('触发了watchEffect,年龄小于18')
  }
  // 由于watchEffect 会立即执行一次，所以第二次age改变会触发cleanup,立即执行的那一次不会触发  (清除副作用:一般用于异步的接口请求取消)
  cleanup(() => {
    console.log('??触发了 cleanup')
  })
})

const watchRef = useTemplateRef('watchRef') // 3.5+ 之后可用

console.log(watchRef, 'watchRef')
// 问题：非响应式的数据能监听么？
// 答案：不能
watch(
  () => count,
  (nv, ov) => {
    console.log('count', nv, ov) // 不会触发
  },
)
</script>

<style scoped lang="scss"></style>
